<!DOCTYPE html> 
<html>
  <head>
    <!--META-->
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--CSS-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.min.css" />
    <link rel="stylesheet" href="API/js/DataTables/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" href="API/css/mycss.css" />
    <link rel="stylesheet" href="css/mycss.css" />

    <!--JS-->
    <script type="text/javascript" src="include/config.js"></script>
    <script type="text/javascript" src="API/js/Jquery/jquery.min.js"></script>
    <script type="text/javascript" src="API/js/JqueryMobile/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="API/js/Highcharts/highcharts.js"></script>
    <script type="text/javascript" src="API/js/Highcharts/modules/exporting.js"></script>
    <script type="text/javascript" src="API/js/DataTables/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="http://wowjs.zamimg.com/widgets/power.js?1389797934"></script>
    <script type="text/javascript" src="API/js/functionsLib.js"></script>
    <script type="text/javascript" src="js/fonctions.js"></script>

    <script language="javascript" type="text/javascript">
    ///////////////////
    //BLOCK VARIABLE GLOBAL
    ///////////////////
    var id_page = 1;

    ///////////////////
    //BLOCK FONCTIONS EVENEMENTS
    ///////////////////
    //Fin chargement page
    function OnLoad() {
        try {
            chargerMetricsDropRate();
            chargerActivitePaquets();
        } catch (er) {
            $.functionsLib.log(0, "ERROR(OnLoad):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS METIER
    ///////////////////
    /**
     * chargerMetricsDropRate
     */
    function chargerMetricsDropRate(){
        try {
            var strhtml = "";
            
            //COMMUN
            var tabInput = { };   
            var json_retour_qualitePaquets = $.functionsLib.callRest(domaine+"phpsql/getQualitePaquets.php", {}, tabInput);
            
            if((json_retour_qualitePaquets["strErreur"] == "")&&(json_retour_qualitePaquets["strErreur"] == "")){
                var nbPaquets = parseInt(json_retour_qualitePaquets["data"]["nbpaquets"]["nb"]);
                var repartitionQualite = json_retour_qualitePaquets["data"]["repartitionQualite"]["data"];
                
                var dropRate_comm = 0;
                var dropRate_rare = 0;
                var dropRate_epic = 0;
                var dropRate_legend = 0;
                var dropRate_gold = 0;
                
                var total = 0;
                for (var indice in repartitionQualite){
                    total += parseInt(repartitionQualite[indice]["nb"]);
                }
                
                for (var indice in repartitionQualite){
                    switch (repartitionQualite[indice]["qualite"]){ 
                        case "Commune": 
                            dropRate_comm = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break; 
                        case "Rare": 
                            dropRate_rare = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break;
                        case "Épique": 
                            dropRate_epic = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break;
                        case "Légendaire": 
                            dropRate_legend = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break;
                    }
                }  
                
                dropRate_gold = $.functionsLib.arrondir(parseInt(json_retour_qualitePaquets["data"]["repartitionGold"]["nb"]) / total * 100,2);
                
            }else{
                $.functionsLib.notification("Erreur : "+json_retour_dropRate["strErreur"]+", "+json_retour_qualitePaquets["strErreur"], $.functionsLib.oda_msg_color.ERROR);
            }
            
            strhtml += 'Chance au tirage g&eacute;n&eacute;ral : ';
            strhtml += '<ul>';
            strhtml += '<li>Chance au tirage des communes : '+dropRate_comm+'%</li>';
            strhtml += '<li>Chance au tirage des rares : '+dropRate_rare+'%</li>';
            strhtml += '<li>Chance au tirage des &eacute;piques : '+dropRate_epic+'%</li>';
            strhtml += '<li>Chance au tirage des l&eacute;gendraires : '+dropRate_legend+'%</li>';
            strhtml += '<li>Chance au tirage des dor&eacute;es : '+dropRate_gold+'%</li>';
            strhtml += '<li>Sur '+nbPaquets+' paquets.</li>';
            strhtml += '</ul>';
            
            //PERSO
            var tabInput = { code_user : $.functionsLib.getUserInfo().code_user };
            var json_retour_dropRate = $.functionsLib.callRest(domaine+"phpsql/getMetricsDropRate.php", {}, tabInput); 
            
            var json_retour_qualitePaquets = $.functionsLib.callRest(domaine+"phpsql/getQualitePaquets.php", {}, tabInput);
            
            if((json_retour_dropRate["strErreur"] == "")&&(json_retour_qualitePaquets["strErreur"] == "")){
                var nbPaquets = parseInt(json_retour_qualitePaquets["data"]["nbpaquets"]["nb"]);
                var repartitionQualite = json_retour_qualitePaquets["data"]["repartitionQualite"]["data"];
                var metricsDez = json_retour_dropRate["data"]["resultatDez"]["data"];
                var metricsAvancement = json_retour_dropRate["data"]["resultatAvan"]["data"];
                
                var dropRateCommune = 0;
                var dropRateRare = 0;
                var dropRateEpique = 0;
                var dropRateLegendaire = 0;
                
                var total = 0;
                for (var indice in repartitionQualite){
                    total += parseInt(repartitionQualite[indice]["nb"]);
                } 
                
                for (var indice in repartitionQualite){
                    switch (repartitionQualite[indice]["qualite"]){ 
                        case "Commune": 
                            dropRateCommune = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break; 
                        case "Rare": 
                            dropRateRare = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break;
                        case "Épique": 
                            dropRateEpique = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break;
                        case "Légendaire": 
                            dropRateLegendaire = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break;
                    }
                } 
                
                var percDezCommune = 0;
                var percDezRare = 0;
                var percDezEpique = 0;
                var percDezLegendaire = 0;
                var percDezGold = 0;
                for (var indice in metricsDez){
                    switch (metricsDez[indice]["qualite"]){ 
                        case "Commune": 
                            percDezCommune = parseFloat(metricsDez[indice]["percDez"]);
                        break; 
                        case "Rare": 
                            percDezRare = parseFloat(metricsDez[indice]["percDez"]);
                        break;
                        case "Épique": 
                            percDezEpique = parseFloat(metricsDez[indice]["percDez"]);
                        break;
                        case "Légendaire": 
                            percDezLegendaire = parseFloat(metricsDez[indice]["percDez"]);
                        break;
                        case "gold": 
                            percDezGold = parseFloat(metricsDez[indice]["percDez"]);
                        break;
                    }
                } 
                
                var strAvCommune = 0;
                var strAvRare = 0;
                var strAvEpique = 0;
                var strAvLegendaire = 0;
                for (var indice in metricsAvancement){
                    switch (metricsAvancement[indice]["qualite"]){ 
                        case "Commune": 
                            var restCommune = parseInt(metricsAvancement[indice]["rest"]);
                            strAvCommune = 'reste : '+restCommune+' pour : '+parseInt(metricsAvancement[indice]["nbMy"])+'/'+(parseInt(metricsAvancement[indice]["nbInv"])*2)+', soit : '+parseFloat(metricsAvancement[indice]["avancement"])+'%';
                        break; 
                        case "Rare": 
                            var restRare = parseInt(metricsAvancement[indice]["rest"]);
                            strAvRare = 'reste : '+restRare+' pour : '+parseInt(metricsAvancement[indice]["nbMy"])+'/'+(parseInt(metricsAvancement[indice]["nbInv"])*2)+', soit : '+parseFloat(metricsAvancement[indice]["avancement"])+'%';
                        break;
                        case "Épique": 
                            var restEpique = parseInt(metricsAvancement[indice]["rest"]);
                            strAvEpique = 'reste : '+restEpique+' pour : '+parseInt(metricsAvancement[indice]["nbMy"])+'/'+(parseInt(metricsAvancement[indice]["nbInv"])*2)+', soit : '+parseFloat(metricsAvancement[indice]["avancement"])+'%';
                        break;
                        case "Légendaire": 
                            var restLegendaire = parseInt(metricsAvancement[indice]["rest"]);
                            strAvLegendaire = 'reste : '+restLegendaire+' pour : '+parseInt(metricsAvancement[indice]["nbMy"])+'/'+parseInt(metricsAvancement[indice]["nbInv"])+', soit : '+parseFloat(metricsAvancement[indice]["avancement"])+'%';
                        break;
                    }
                } 
                
                var burnDownCommune = $.functionsLib.arrondir((restCommune*100)/(dropRateCommune*percDezCommune/100)/5,0);
                var burnDownRare = $.functionsLib.arrondir((restRare*100)/(dropRateRare*percDezRare/100)/5,0);
                var burnDownEpique = $.functionsLib.arrondir((restEpique*100)/(dropRateEpique*dropRateEpique/100)/5,0);
                var burnDownLegendaire = $.functionsLib.arrondir((restLegendaire*100)/(dropRateLegendaire*dropRateLegendaire/100)/5,0);
                
                strhtml += 'Vos statistiques de tirage : ';
                strhtml += '<ul>';
                
                if(dropRateCommune >= dropRate_comm){
                    var color =  $.functionsLib.oda_msg_color.SUCCES;
                }else{
                    var color =  $.functionsLib.oda_msg_color.WARNING;
                }
                strhtml += '<li style="color:'+color+';">Taux de tirage des communes : '+dropRateCommune+'% ('+percDezCommune+'% Dez)</li>';
                
                if(dropRateRare >= dropRate_rare){
                    var color =  $.functionsLib.oda_msg_color.SUCCES;
                }else{
                    var color =  $.functionsLib.oda_msg_color.WARNING;
                }
                strhtml += '<li style="color:'+color+';">Taux de tirage des rares : '+dropRateRare+'% ('+percDezRare+'% Dez)</li>';
                
                if(dropRateEpique >= dropRate_epic){
                    var color =  $.functionsLib.oda_msg_color.SUCCES;
                }else{
                    var color =  $.functionsLib.oda_msg_color.WARNING;
                }
                strhtml += '<li style="color:'+color+';">Taux de tirage des &eacute;piques : '+dropRateEpique+'% ('+percDezEpique+'% Dez)</li>';
                
                if(dropRateLegendaire >= dropRate_legend){
                    var color =  $.functionsLib.oda_msg_color.SUCCES;
                }else{
                    var color =  $.functionsLib.oda_msg_color.WARNING;
                }
                strhtml += '<li style="color:'+color+';">Taux de tirage des l&eacute;gendaires : '+dropRateLegendaire+'% ('+percDezLegendaire+'% Dez)</li>';
                
                var myDropRateGold = $.functionsLib.arrondir(parseFloat(json_retour_dropRate["data"]["resultat"]["dropRate_gold"]),2);
                if(myDropRateGold >= dropRate_gold){
                    var color =  $.functionsLib.oda_msg_color.SUCCES;
                }else{
                    var color =  $.functionsLib.oda_msg_color.WARNING;
                }
                strhtml += '<li style="color:'+color+';">Taux de tirage des dor&eacute;es : '+myDropRateGold+'% ('+percDezGold+'% Dez)</li>';
                
                strhtml += '<li>Sur '+nbPaquets+' paquets.</li>';
                strhtml += '</ul>';
                
                strhtml += 'Votre avancement : ';
                strhtml += '<ul>';
                strhtml += '<li>Pour les communes => '+strAvCommune+'</li>';
                strhtml += '<li>Pour les rares => '+strAvRare+'</li>';
                strhtml += '<li>Pour les &eacute;piques => '+strAvEpique+'</li>';
                strhtml += '<li>Pour les l&eacute;gendaires => '+strAvLegendaire+'</li>';
                strhtml += '</ul>';
                
                strhtml += 'Votre burn down pour finir collection : ';
                strhtml += '<ul>';
                strhtml += '<li>Pour les communes => '+burnDownCommune+' paquets &agrave; ouvrir</li>';
                strhtml += '<li>Pour les rares => '+burnDownRare+' paquets &agrave; ouvrir</li>';
                strhtml += '<li>Pour les &eacute;piques => '+burnDownEpique+' paquets &agrave; ouvrir</li>';
                strhtml += '<li>Pour les l&eacute;gendaires => '+burnDownLegendaire+' paquets &agrave; ouvrir</li>';
                strhtml += '</ul>';
                
                $('#div_metrics_dropRate').html(strhtml);
            } else{
                $.functionsLib.notification("Erreur : "+json_retour_dropRate["strErreur"]+", "+json_retour_qualitePaquets["strErreur"], $.functionsLib.oda_msg_color.ERROR);
            }
        } catch (er) {
            $.functionsLib.log(0, "ERROR(chargerMetricsDropRate):" + er.message);
        }
    }
    
    /**
     * @name chargerExemple
     * @desc Hello
     * @param {type} nom
     * @return {boolean}
     */
    function chargerActivitePaquets(){
        try {
            var strhtml = "<IMG SRC=\"API/img/loading.gif\" ALT=\"Chargement\" TITLE=\"Chargement\">";
            $('#div_activitePaquets').html(strhtml);
            
            var myReturn = true;
            
            var tabSetting = { functionRetour : retourActivitePaquets};
            var tabInput = { };
            $.functionsLib.callRest(domaine+"phpsql/getActivitePaquetsMatchs.php", tabSetting, tabInput); 
            
            return myReturn;
        } catch (er) {
            $.functionsLib.log(0, "ERROR(chargerActivitePaquets):" + er.message);
            return null;
        }
    }

    ///////////////////
    //BLOCK FONCTIONS AFFICHAGE
    ///////////////////
    /**
     * @name retourExemple
     * @param {json} p_retour
     */
    function retourActivitePaquets(p_retour){
        try {
            var myReturn = true;
            
            if(p_retour["strErreur"] == ""){
                var objDataTable = $.functionsLib.objDataTableFromJsonArray(p_retour["data"]["activitePaquets"]["data"]);
                var strhtml = '<table cellpadding="0" cellspacing="0" border="0" class="display" id="table_activitePaquets">';
                $('#div_activitePaquets').html(strhtml);
                
                var oTable = $('#table_activitePaquets').dataTable( {
                    "oLanguage": {
                        "sUrl": "API/js/DataTables/i8n/lang_FR.json"
                    },
                    "bLengthChange": false,
                    "bSort": false,
                    "bFilter": false,
                    "bInfo":false,
                    "bPaginate": false,
                    "aaData": objDataTable.data,
                    "aoColumns": [
                        { "sTitle": "Date", "width": "5em", "sClass": "dataTableColCenter" },
                        { "sTitle": "Utilisateur", "width": "4em", "sClass": "dataTableColCenter" },
                        { "sTitle": "Mode", "width": "10em", "sClass": "dataTableColCenter" },
                        { "sTitle": "Poussière", "width": "5em", "sClass": "dataTableColCenter" },
                        { "sTitle": "Cool", "width": "4em", "sClass": "dataTableColCenter" }
                    ],
                    "aoColumnDefs": [
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["date"]];
                            },
                            "aTargets": [ 0 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["code_user"]];
                            },
                            "aTargets": [ 1 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["mode"]];
                            },
                            "aTargets": [ 2 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["cout"]];
                            },
                            "aTargets": [ 3 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                var strHtml = "";
                                if(row[objDataTable.entete["cool"]] != "0"){
                                    return "<a href='#' onclick=\"afficherCool({'date':'"+row[objDataTable.entete["date"]]+"','code_user':'"+row[objDataTable.entete["code_user"]]+"','mode':'"+row[objDataTable.entete["mode"]]+"'})\">Cool!</a>";
                                }
                                return strHtml;
                            },
                            "aTargets": [ 4 ]
                        }
                    ],
                    "fnDrawCallback": function( oSettings ) {
                        $('#table_activitePaquets').trigger('create');
                    } 
                });
            } else{
                $.functionsLib.notification("Erreur : "+p_retour["strErreur"], $.functionsLib.oda_msg_color.ERROR);
            }
            
            return myReturn;
        } catch (er) {
            $.functionsLib.log(0, "ERROR(retourActivitePaquets):" + er.message);
            return null;
        }
    }
    
    /**
     * Open cool cards
     */
    function afficherCool(p_params){
        try {
            setTimeout(function(){
                var strhtml = "<IMG SRC=\"API/img/loading.gif\" ALT=\"Chargement\" TITLE=\"Chargement\">";
                $('#div_popup').css('width', 500);
                $('#div_popup').css('height', 400);
                $.functionsLib.affichePopUp('Cartes cools !',strhtml);

                var myReturn = true;

                var tabSetting = { functionRetour : retourCoolCards};
                var tabInput = { "code_user" : p_params.code_user, "date" : p_params.date, "mode" : p_params.mode };
                $.functionsLib.callRest(domaine+"phpsql/getCoolCards.php", tabSetting, tabInput); 

                return myReturn;
            }, 100);
        } catch (er) {
            $.functionsLib.log(0, "ERROR(openMissedCards):" + er.message);
        }
    }
    
    /**
     * retourCoolCards
     * 
     * @param {array} p_retour
     */
    function retourCoolCards(json_retour){
        try {
            if(json_retour["strErreur"] == ""){
                var objDataTable = $.functionsLib.objDataTableFromJsonArray(json_retour["data"]["resultat"]["data"]);
                var strhtml = '<table cellpadding="0" cellspacing="0" border="0" class="display" id="table_CoolCards">';
                $('#div_popup').html(strhtml);
                
                var oTable = $('#table_CoolCards').dataTable( {
                    "oLanguage": {
                        "sUrl": "API/js/DataTables/i8n/lang_FR.json"
                    },
                    "bLengthChange": false,
                    "iDisplayLength": 5,
                    "aaData": objDataTable.data,
                    "aaSorting": [[0,'asc']],
                    "aoColumns": [
                        { "sTitle": "Carte", "width": "10em" },
                        { "sTitle": "Dorée", "sClass": "dataTableColCenter", "width": "2em" },
                        { "sTitle": "Coût", "sClass": "dataTableColCenter", "width": "2em" },
                        { "sTitle": "Type", "width": "3em" }
                    ],
                    "aoColumnDefs": [
                        {
                            mRender: function ( data, type, row ) {
                                var dore = "";
                                if(row[objDataTable.entete["gold"]] == "1"){
                                    dore = "&amp;premium";
                                }
                                var strHtml = '<a href="http://www.wowhead.com/hearthstone/card='+row[objDataTable.entete["id_link"]]+dore+'" style="color: '+colorCard[row[objDataTable.entete["qualite"]]]+';text-decoration: none">'+row[objDataTable.entete["nom"]]+'</a>';
                                return strHtml;
                            },
                            aTargets: [ 0 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["gold"]];
                            },
                            "aTargets": [ 1 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["cout"]];
                            },
                            "aTargets": [ 2 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["type"]];
                            },
                            "aTargets": [ 3 ]
                        }
                    ],
                    "fnDrawCallback": function( oSettings ) {
                        $('#table_CoolCards').trigger('create');
                    } 
                });
            } else{
                $.functionsLib.notification("Erreur : "+p_retour["strErreur"], $.functionsLib.oda_msg_color.ERROR);
            }
        } catch (er) {
            $.functionsLib.log(0, "ERROR(retourCoolCards):" + er.message);
        }
    }
    
</script>

<style>
/* default styles here for older browsers. 
   I tend to go for a 600px - 960px width max but using percentages
*/
/* Stack all blocks to start */
.oda-block-a, 
.oda-block-b { 
    width: 100%; 
    float:none; 
} 
@media only screen and (min-width:960px){
    /* styles for browsers larger than 960px; */
    .oda-block-a{ 
        float:left; 
        width:50%; 
    }
    .oda-block-b{ 
        float:right; 
        width:50%; 
    }
}
</style>

</head>
<body onload="OnLoad();">

    <!-- page -->
    <div data-role="page" data-title="Titre">

        <!-- /panel -->
        <div data-role="panel" id="mypanel" data-display="overlay" data-position="left">
        </div>
        <!-- /panel -->
        
        <!-- PopUp -->
        <div data-role="popup" id="popup" class="ui-content">
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
            <div style="padding:10px 20px;">
                <h4><label id="label_popup"></label></h4>
                <div id="div_popup"></div>
            </div>
        </div>
        <!-- /PopUp -->

        <!-- header -->
        <div data-role="header" data-position="fixed">
            <a href="#mypanel" data-role="button" data-icon="home" data-iconpos="notext">home</a>
            <h1 id="id_titre">titre</h1>
            <a href="javascript:window.location = ('./api_page_contact.html?mili='+$.functionsLib.getMilise());" data-role="button" data-icon="info" data-iconpos="notext">Contact</a>
        </div>
        <!-- /header -->

        <!-- content -->
        <div data-role="content" id="main_content">
            
            <div class="oda-block-a">
                <div data-role="collapsible" data-collapsed="false" data-mini="true" style="width: 99%;">
                    <h3>Activit&eacute; de la communot&eacute;e</h3>
                    <table>
                        <tr>
                            <td>
                                <div id="div_activitePaquets"></div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <div class="oda-block-b">
                <div data-role="collapsible" data-collapsed="false" data-mini="true" style="width: 99%;">
                    <h3>Metrics Drop</h3>
                    <table>
                        <tr>
                            <td>
                                <div id="div_metrics_dropRate"></div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            
        </div>
        <!-- /content -->

        <!-- footer -->
        <div data-role="footer" data-position="fixed">
            <a data-role="button" data-icon="search" data-iconpos="notext" class="ui-btn-left" href="javascript:window.location = ('./api_page_faq.html?mili='+$.functionsLib.getMilise());">FAQ</a>
            <h1 id="id_affichageUser">User</h1>
            <a data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" href="javascript:window.location = ('./api_page_sortie.html?mili='+$.functionsLib.getMilise());">Logout</a>
        </div>
        <!-- /footer -->

    </div>
    <!-- /page -->
</body>
</html>